<template>
	<div class="userAccountCon">
		<div class="body_show" style="padding:0 10px;">
			<div class="row" style="margin-bottom: 10px;">
				<div class="col-xs-12">
					<h4 style="margin-top:1em;">添加用户:</h4>
				</div>
			</div>

			<el-row :gutter="24">
				<el-form :model="addAllUser" :rules="rules" ref="addAllUser" :inline="true" class="demo-form-inline">
					<el-form-item label="姓名" prop="alias">
						<el-input placeholder="请输入姓名" v-model="addAllUser.alias"></el-input>
					</el-form-item>

					<el-form-item label="身份证号" prop="user_name">
						<el-input placeholder="请输入账号（身份证）" v-model="addAllUser.user_name"></el-input>
					</el-form-item>

					<el-form-item label="密码" prop="password">
						<el-input placeholder="请输入密码" v-model="addAllUser.password"></el-input>
					</el-form-item>
					
					<el-form-item label="性别" prop="password">
						<el-select clearable v-model="addAllUser.role" placeholder="请选择性别">
							<el-option v-for="item in checkRoleInUSer" :label="item.desc" :value="item.role">{{item.desc}}</el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item label="电话号码" prop="password">
						<el-input placeholder="请输入电话号码" v-model="addAllUser.password"></el-input>
					</el-form-item>
					
					<el-form-item label="学历" prop="password">
						<el-select clearable v-model="addAllUser.role" placeholder="请选择性别">
							<el-option v-for="item in checkRoleInUSer" :label="item.desc" :value="item.role">{{item.desc}}</el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item label="业务角色" prop="role">
						<el-select clearable v-model="addAllUser.role" placeholder="请选择业务角色">
							<el-option v-for="item in checkRoleInUSer" :label="item.desc" :value="item.role">{{item.desc}}</el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item label="" prop="role">
						<el-button>选择所属事业部</el-button>
					</el-form-item>

					<el-form-item>
						<el-button @click="addUser('addAllUser')">确认添加</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row :gutter="24">
				<el-button>批量导入</el-button>
				<el-button>下载模板</el-button>
			</el-row>

			<!--搜索模块-->
			<div class="row" style="padding:10px 0;">
				<div class="col-xs-12">
					<h4>搜索用户:</h4>
				</div>
			</div>
			<div class="inline_search" style="display:inline-block;background-color:rgba(64,158,255,0.3);padding:10px 10px 0;">
				<el-col class="input_col" :xs="12" :sm="8" :md="6" :xl="5">
					<el-input placeholder="请输入姓名" v-model="searchFrom.alias"></el-input>
				</el-col>
				<el-col class="input_col" :xs="12" :sm="8" :md="6" :xl="5">
					<el-input placeholder="请输入手机号" v-model="searchFrom.alias"></el-input>
				</el-col>
				<el-col class="input_col" :xs="12" :sm="8" :md="6" :xl="5">
					<el-input placeholder="请输入要查找的账号（身份证）" v-model="searchFrom.username"></el-input>
				</el-col>
				<el-col class="input_col" :xs="12" :sm="8" :md="6" :xl="5">
					<el-select clearable v-model="searchFrom.role" placeholder="请选择业务角色">
						<el-option v-for="item in checkRoleInUSer" :label="item.desc" :value="item.role">{{item.desc}}</el-option>
					</el-select>
				</el-col>
				<el-button @click="searchItem()">搜索</el-button>
			</div>

			<div class="row" v-if="allUser" style="margin-top: 20px;">
				<el-row>
					<el-col span="18">
						<el-table :data="allUser" border style="width: 100%">
							<el-table-column label="用户头像" align="center" >
								<template slot-scope="scope" > 
									<img style="width: 60px;margin: 0 auto;" :src="scope.row.headimg_url ? scope.row.headimg_url : require('@/assets/images/empty_user.png')" alt="" />
								</template>
							</el-table-column>
							<el-table-column prop="alias" label="用户名">
							</el-table-column>
							<el-table-column prop="user" label="账号" >
							</el-table-column>
							<el-table-column label="身份">
								<template slot-scope="scope">{{scope.row.business_role |getUserDes}}</template>
							</el-table-column>
							<el-table-column prop="parent_user" label="直系上级">
							</el-table-column>
							<el-table-column prop="parent_user" label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="danger" style="margin-right: 10px;" @click="delSearchItem(scope.row)">删除</el-button>
									<el-button style="margin-top: 5px;margin-left: 0;" size="mini" type="primary" @click="ediSearchItem(scope.row)">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</div>
		</div>

		<!--   选择父元素名称       -->
		<el-dialog title="请选择您的直系上级" :visible.sync="parentModal.visible" width="700px">
			<el-table ref="singleTable" :data="parentModal.allData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column property="alias" label="姓名" width="120">
				</el-table-column>
				<el-table-column property="user" label="账号" width="120">
				</el-table-column>
				<el-table-column label="身份">
					<template slot-scope="scope">{{scope.row.business_role |getUserDes}}</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
		    <el-button  @click="backCheckParent()">取 消</el-button>
		    <el-button type="primary" @click="checkParent()">确 定</el-button>
		  </span>
		</el-dialog>

		<!--   编辑用户身份       -->
		<el-dialog title="修改用户身份" :visible.sync="editionAllData.visible" width="700px">
			<el-select clearable v-model="editionAllData.role" placeholder="请选择业务角色">
				<el-option v-for="item in checkRoleInUSer" :label="item.desc" :value="item.role">{{item.desc}}</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
		    <el-button  @click="backSearchItem()">取 消</el-button>
		    <el-button type="primary" @click="saveSearchItem()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	//获取用户角色配置信息
	import { AddUser, userGetRoleConfig, userGetAll, userGetParent, userAction } from "@/assets/util/api.js"
	export default {
		name: 'userAccountCon',
		data() {
			var user_name = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入身份证号'));
				} else if(value.length === 15 || value.length === 18) {
					//        this.$refs.ruleForm2.validateField('user_name');
					callback();
				} else {
					callback(new Error('请输入正确的身份证号'));
				}
			};
			return {
				access_token: "",
				allUser: "", //查找到的用户数据
				checkRoleInUSer: "", //获取到的当前用户权限
				addAllUser: {
					alias: "",
					user_name: "",
					password: "",
					role: "", //用户角色
					parent_user_name: "", //父用户名
				},
				searchFrom: {
					alias: "",
					user_name: "",
					role: "", //用户角色
				},
				parentModal: {
					visible: false,
					value: "",
					allData: "",
					action: "",
				},
				editionAllData: {
					visible: false,
					role: "",
					user_name: "",
				},
				rules: {
					alias: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							required: true,
							min: 2,
							max: 4,
							message: '长度在 2 到 4 个字符',
							trigger: 'blur'
						},
					],
					user_name: [{
						validator: user_name,
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ],
					role: [{
						required: true,
						message: '请选择业务角色',
						trigger: 'blur'
					}, ]
				}
			}
		},
		mounted() {
			var _this = this;
			this.topic = this.inStorage("get", "topic");

			//获取当前用户可添加权限
			_this.access_token = this.inStorage("get", "access_token");
			let params = {
				access_token: _this.access_token,
			}
			userGetRoleConfig(this, params).then((res) => {
				if(res.data.code) {
					_this.$message.error(_this.publicMsg(res.data.code), res.data.message);
				}
				if(res.data.state) {
					_this.inStorage("set", "inUserRole", res.data.data);
					_this.checkRoleInUSer = res.data.data;
				}
			})

			//获取所有用户
			//	this.getUser();
		},
		methods: {
			//用户表单验证
			checkFrom(formName) {
				var check = false;
				this.$refs[formName].validate((valid) => {
					if(valid) {
						check = true;
					} else {
						check = false;
					}
				});
				return check;
			},
			//添加用户
			addUser(formName) {
				let check = this.checkFrom(formName);
				if(!check) {
					return;
				}
				if((check && (!this.parentModal.value) && this.addAllUser.role == 3) || (check && (!this.parentModal.value) && this.addAllUser.role == 4)) {
					this.userGetParent("add");
					return;
				}
				var _this = this;
				var params = {
					access_token: _this.access_token,
					alias: this.addAllUser.alias,
					user_name: this.addAllUser.user_name,
					password: this.addAllUser.password,
					role: this.addAllUser.role, //用户角色
					parent_user_name: this.parentModal.value, //父用户名
				}

				AddUser(this, params).then((res) => {
					console.log(res);
					if(res.data.state) {
						_this.$message.success("添加用户成功!");
					}
					if(res.data.code) {
						_this.$message.error(_this.publicMsg(res.data.code), res.data.message);
					}
					_this.addAllUser = {
						alias: "",
						user_name: "",
						password: "",
						role: "", //用户角色
						parent_user_name: "", //父用户名
					};
					this.parentModal = {
						visible: false,
						value: "",
						allData: "",
					};
				})
			},
			//查找用户
			searchItem() {
				var _this = this;

				var params = {
					access_token: _this.access_token,
					user_name: this.searchFrom.user_name,
					alias: this.searchFrom.alias,
					role: this.searchFrom.role,
				}
				userGetAll(this, params).then((res) => {
					console.log(res);
					if(res.data.state == true) {
						_this.allUser = res.data.data.lower;
					}
					if(res.data.code) {
						if(res.data.code == 1006) {
							_this.RouterTo(_this, "/")
						} else {
							_this.$message.error(_this.publicMsg(res.data.code), res.data.message);
						}
					}
				})
			},
			//获取所有上级列表
			userGetParent(val) {
				var _this = this;
				var params = {
					access_token: _this.access_token,
					role: this.addAllUser.role,
				}
				userGetParent(this, params).then(res => {
					console.log(res)
					if(res.data.state) {
						_this.parentModal.visible = true;
						_this.parentModal.allData = res.data.data;
						_this.parentModal.action = val;
					}
				})
			},
			//修改用户角色 || 删除用户
			userAction(val) {
				var _this = this;
				var params = {
					access_token: _this.access_token,
					user_name: this.editionAllData.user_name,
					parent_user_name: this.parentModal.value,
					role: this.editionAllData.role,
				}
				userAction(this, params).then(res => {
					if(res.data.state) {
						if(val === 'del') {
							_this.$message.success("删除成功！")
						} else if(val === 'edition') {
							_this.$message.success("编辑成功！");
							_this.editionAllData.visible = false;
							_this.parentModal.value = "";
						}
						this.searchItem();
					}
				})
			},
			delSearchItem(item) {
				console.log(item);
				this.parentModal.value = "";
				this.editionAllData = {
					visible: false,
					role: "",
					user_name: item.user,
				};
				this.userAction('del');
			},
			//编辑当前用户元素
			ediSearchItem(item) {
				this.editionAllData.visible = true;
				this.editionAllData.user_name = item.user;
			},
			//退还不编辑
			backSearchItem(item) {
				this.editionAllData.visible = false;
				this.editionAllData = {
					visible: false,
					role: "",
					user_name: "",
				};
			},
			//编辑
			saveSearchItem() {
				console.log(this.editionAllData.role)
				console.log(this.editionAllData)
				if(this.editionAllData.role == 3 || this.editionAllData.role == 4) {
					this.addAllUser.role = this.editionAllData.role;
					//			this.editionAllData.visible = false;
					this.userGetParent("edition");
					return;
				} else {
					this.userAction('edition');
				}
			},
			//父元素单选切换值
			handleCurrentChange(value) {
				if(!!value) {
					this.parentModal.value = value.user;
				}
			},
			//选择父元素名称进入两个分支 保存或 退出
			backCheckParent() {
				this.$message.warning("此类型必须选择直系上司！");
				this.parentModal = {
					visible: false,
					value: "",
				};
				this.editionAllData = {
					visible: false,
					role: "",
					user_name: "",
				};
			},
			checkParent() {
				if(!!this.parentModal.value && this.parentModal.action === 'add') {
					this.parentModal.visible = false;
					this.addUser('addAllUser');
				} else if(!!this.parentModal.value && this.parentModal.action === 'edition') {
					this.parentModal.visible = false;
					this.userAction('edition');
				}
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.input_col {
		margin-bottom: 10px;
	}
	
	.inline_search .input_col {
		margin-right: 15px;
	}
</style>